<mat-card class="panel-login">
  <!-- <i class="icon iconfont">&#xe6c3;</i> -->
  <mat-card-title
    style="display:flex; justify-content: space-between;align-items: baseline;"
    >{{ "user.login.title" | translate: lang }}
  </mat-card-title>
  <form [formGroup]="validateForm" (ngSubmit)="onLogin()">
    <div class="i">
      <mat-form-field>
        <input
          matInput
          #email
          type="text"
          formControlName="username"
          placeholder="{{
            'user.login.username.placeholder' | translate: lang
          }}"
        />
        <mat-error
          l10nTranslate
          *ngIf="validateForm.controls.username.hasError('required')"
        >
          user.login.username.error.require
        </mat-error>
        <mat-error
          l10nTranslate
          *ngIf="validateForm.controls.username.hasError('email')"
        >
          user.login.username.error.email
        </mat-error>
        <mat-error i18n *ngIf="validateForm.controls.username.hasError('has')">
          {{ "user.login.username.error.has" | translate: lang }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="i">
      <mat-form-field>
        <input
          matInput
          formControlName="password"
          placeholder="{{
            'user.login.password.placeholder' | translate: lang
          }}"
          [type]="hide ? 'password' : 'text'"
        />
        <mat-icon style="color:#a4afd2" matSuffix (click)="hide = !hide">{{
          hide ? "visibility" : "visibility_off"
        }}</mat-icon>
        <mat-error *ngIf="validateForm.controls.password.hasError('required')">
          {{ "user.login.password.error.require" | translate: lang }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="i code">
      <mat-form-field>
        <input
          matInput
          formControlName="code"
          placeholder="{{ 'user.login.code.placeholder' | translate: lang }}"
        />
        <mat-error *ngIf="validateForm.controls.code.hasError('required')">
          {{ "user.login.code.error.require" | translate: lang }}
        </mat-error>
      </mat-form-field>
      <!-- 这里先写死type -->
      <div
        class="sendCode"
        type="button"
        mat-button
        appCode
        [aim]="validateForm.controls.username.value"
      >
        {{ "user.login.btn.send.text" | translate: lang }}
      </div>
    </div>
    <div class="i enroll df jcsb">
      <!-- <mat-checkbox formControlName="remember">{{
        "user.login.checkbox.remember.text" | translate: lang
      }}</mat-checkbox> -->
      <span></span>
      <span class="login-form-forgot"
        ><a [routerLink]="['/u/forgot']">{{
          "user.login.btn.findpwd.text" | translate: lang
        }}</a>
        <!-- | -->
      </span>
    </div>
    <div class="i slidercode">
      <app-slider-code
        *ngIf="!isServer"
        #sliderCodeRef
        (onChangeValidate)="onChangeValidate($event)"
      ></app-slider-code>
    </div>
    <div class="i login">
      <button class="submit" mat-button [disabled]="!validateForm.valid">
        {{ "user.login.btn.login.text" | translate: lang }}
      </button>
    </div>
  </form>
</mat-card>
